<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">客户名称</label>
      <div class="layui-input-block">
        <input type="khname" name="khname" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">联系人</label>
      <div class="layui-input-block">
        <input type="lxr" name="lxr" placeholder="请输入联系人" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">联系电话</label>
      <div class="layui-input-block">
        <input type="lxdh" name="lxdh" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">所属销售</label>
      <div class="layui-input-block">
        <input type="ssxs" name="ssxs" placeholder="请输入所属销售" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">意向度</label>
      <div class="layui-input-block">
        <input type="khjb" name="khjb" placeholder="请输入意向度" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">去电次数</label>
      <div class="layui-input-block">
        <input type="qdcs" name="qdcs" placeholder="请输入去电次数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">跟进记录</label>
      <div class="layui-input-block">
        <input type="gjjl" name="gjjl" placeholder="请输入跟进记录" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">最后跟进时间</label>
      <div class="layui-input-block">
        <input type="zhgjtime" name="zhgjtime" placeholder="请输入最后跟进时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">下次联系时间</label>
      <div class="layui-input-block">
        <input type="xclxtime" name="xclxtime" placeholder="请输入下次联系时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">入库时间</label>
      <div class="layui-input-block">
        <input type="rktime" name="rktime" placeholder="请输入入库时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">客户来源</label>
      <div class="layui-input-block">
        <input type="khly" name="khly" placeholder="请输入客户来源" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <input type="bz" name="bz" placeholder="请输入备注" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">流公海时间</label>
      <div class="layui-input-block">
        <input type="lrghtime" name="lrghtime" placeholder="请输入流公海时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">公司名称</label>
      <div class="layui-input-block">
        <input type="company" name="company" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="tWdkh:list">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-form">
            <input type="text" name="date" class="layui-input" id="test-range0" placeholder="请选择跟进时间">
        </div>
        <div class="layui-input-inline layui-form" id="khjbSCid">
            <select id="kujbSC">
                <option value="">请选择意向度</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="deptSCid" >
            <select id="deptSC">
                <option value="">请选择部门</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="ssxsSCid">
            <select id="ssxsSC">
                <option value="">请选择所属销售</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="khlySCid">
            <select id="khlySC">
                <option value="">请选择客户来源</option>
            </select>
        </div>
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <!--        <button class="layui-btn"   id="export">导出全部</button>-->
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
<!--    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="tWdkh:add">添加</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tWdkh:delete">删除</button>-->
  </div>
</script>
<script type="text/html" id="tool">
    {{#  if(d.isbd == "0"){ }}
    <a class="layui-btn layui-btn-xs" lay-event="hujiao" shiro:hasPermission="twdkh:wh">呼叫</a>
    {{#  } }}
    {{#  if(d.isbd == "1" ){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="hujiao" shiro:hasPermission="twdkh:wh">呼叫</a>
    {{#  } }}
    <a class="layui-btn layui-btn-xs" lay-event="xjl" >写记录</a>
    <a class="layui-btn layui-btn-xs" lay-event="info" >查看</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var isycVo;
  var currPage = 1;//首先默认值为1，防止出错
  layui.use(['table', 'layer', 'laydate'], function () {
      let data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      month = month < 10?"0"+month:month;
      day = day < 10?"0"+day:day;
      var eDate =  year + '-' + month + '-' + day;
      var sDate =  year + '-' + month + '-' + day;
      var dateValue = sDate + ' - ' + eDate;
      laydate.render({
          elem: '#test-range0' ,//指定元素
          range: true,
          value: dateValue
      });

      var info  = function () {
          userInfo = CoreUtil.getData("userInfo");
          userRoles = CoreUtil.getData("userRoles");
          userDepts = CoreUtil.getData("userDepts");
          sysRolesList = CoreUtil.getData("sysRolesList");
          userSysUsers = CoreUtil.getData("userSysUsers");
          hwtj = CoreUtil.getData("hwtj");
          CoreUtil.sendGet("/tWdkh/infoData/", null, function (res) {
              //加载表格
              tableIns();
              var code = res.code;
              var data = res.data;
              //username、 khlySC 请选择客户来源、请选择意向度、请选择所属销售;
              if (code == 0) {
                  //客户来源
                  var khlySC = $("#khlySC");
                  $.each(data.khly, function (index, item) {
                      khlySC.append("<option value=" + item + ">" + item + "</option>");
                  });
                  //意向度
                  var kujbSC = $("#kujbSC");
                  $.each(data.hkjb, function (index, item) {
                      if (!!item) {
                          kujbSC.append("<option value=" + item.id + ">" + item.value + "</option>");
                      }
                  });
                  //所属销售
                  var ssxsSC = $("#ssxsSC");
                  $.each(data.ssxs, function (index, item) {
                      if (!!item) {
                          ssxsSC.append("<option value=" + item + ">" + item + "</option>");
                      }
                  });
                  //所属部门
                  var deptSC = $("#deptSC");
                  $.each(data.dept, function (index, item) {
                      if (!!item) {
                          deptSC.append("<option value=" + item.id + ">" + item.name + "</option>");
                      }
                  });
                  isycVo = data.isyc;
                  form.render("select");
              }
          });
      };
      info();
      var tableIns = function () {
          var range =  $('#test-range0').val().replace(/ - /g,' 至 ');
          var split0 = range.split(' 至 ');
          //这里以搜索为例
          var whereData = { //设定异步数据接口的额外参数，任意设
              xclxStartDate: split0[0],
              xclxEndDate: split0[1],
          }
          //加载table
          tableIns1 = table.render({
              elem: '#showTable'
              , contentType: 'application/json'
              , headers: {"authorization": token}
              , where: whereData
              , page: true //开启分页
              , url: '/tWdkh/listByPage' //数据接口
              , method: 'POST'
              ,done: function(res, curr, count){
                  //如果是异步请求数据方式，res即为你接口返回的信息。
                  /**
                   *如果是直接赋值的方式，
                   *res即为：{data: [], count: 99}
                   *data为当前页数据、count为数据总长度
                   */
                  console.log(res);
                  currPage = curr;//将当前页码赋值给全局变量currPage
                  //得到当前页码
                  console.log(curr);

                  //得到数据总量
                  console.log(count);
              }
              , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                  return {
                      "code": res.code, //解析接口状态
                      "msg": res.msg, //解析提示文本
                      "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                      "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                  }
              }
              , cols: [
                  [
                      //:客户名称、联系人、联系电话、所属销售、意向度、去电次数、跟进记录、最后跟进时间、下次联系时间、入库时间、客户来源、备注、流公海时间
                      {type: 'checkbox', fixed: 'left'},
                      {field: 'khname', title: '客户名称',event: 'khname',width: 240 ,
                          style: 'color: #003CFFFF; cursor:pointer',sort: true,align: 'center',fixed: "left"},
                      {field: 'lxr', title: '联系人', width: 100 ,sort: true,align: 'center',fixed: "left"},
                      {field: 'lxdh', title: '联系电话', width: 140 ,templet: function (item) {
                              if (item.lxdh.length == 11 && isycVo == 1) { //是否隐藏
                                  return item.lxdh.replace(item.lxdh.substring(3, 7), "****");
                              } else if (item.lxdh.length > 11 && isycVo == 1) { //是否隐藏
                                  return item.lxdh.replace(item.lxdh.substring(3, 9), "****");
                              } else {
                                  return item.lxdh;
                              }
                          }, align: 'center',fixed: "left"},
                      {field: 'khjb', title: '意向度', width: 90 ,sort: true,align: 'center',fixed: "left"},
                      {field: 'ssxs', title: '所属销售', width: 120 ,sort: true,align: 'center'},
                      {field: 'qdcs', title: '去电次数', width: 100 ,sort: true,align: 'center'},
                      // {field: 'gjjl', title: '跟进记录', width: 110 , event: 'viewReport',style: 'font-size: 12px; color: #666; cursor:pointer', sort: true,align: 'center'},
                      {field: 'zhgjtime', title: '最后跟进时间',width: 200 , sort: true,align: 'center'},
                      {field: 'xclxtime', title: '下次联系时间',width: 200 , sort: true,align: 'center'},
                      {field: 'rktime', title: '入库时间',width: 200 , sort: true,align: 'center'},
                      {field: 'khly', title: '客户来源',width: 120 ,  sort: true,align: 'center'},
                      {field: 'bz', title: '备注', width: 100 , sort: true,align: 'center'},
                      {field: 'lrghtime', title: '流公海时间',width: 200 , sort: true,align: 'center'},
                      {field: 'qtdh', title: '其他电话',width: 220 , event: 'qtdh',templet: function (item) {
                              if ( isycVo == 1) { //是否隐藏
                                  return "****";
                              } else {
                                  return item.qtdh;
                              }
                          }, style: 'font-size: 12px; color: #666; cursor:pointer', sort: true,align: 'center'},
                      {field: 'khdz', title: '客户地址', width: 220 , sort: true,align: 'center'},
                      {field: 'khhy', title: '客户行业', width: 220 , sort: true,align: 'center'},
                      {width: 220, toolbar: "#tool", title: '操作',fixed: "right"}
                  ]
              ]
              , toolbar: '#toolbar'
          });
      }
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
          case 'hujiao': //呼叫
              data.hjType = '0';//呼叫主要号码
              hujiao(data);
              break;
          case 'hujiaoqtdh': //呼叫
              data.hjType = '1';//呼叫其他号码
              data.lxdh = data.qtdh;
              hujiao(data);
              break;
          case 'xjl':   //写记录
              layer.open({
                  type: 2,
                  title: '<i class=iconfont>&#xe7c7;</i> 写记录',
                  area: ['80%', '70%'],
                  content: ['/index/tGjjl/add/'+data.id, 'yes'],
                  skin: 'layui-layer-molv',
                  btn: ['立即提交', '关闭'],
                  btnAlign: 'c',
                  shadeClose: true,
                  shade: 0.8,
                  yes: function(index, layero){
                      var submit = layero.find('iframe').contents().find("#submit");// #subBtn为页面层提交按钮ID
                      submit.click();// 触发提交监听
                      layer.close(index);
                      return false;
                  }
              });
              break;
          case 'info':   //查看
              window.open("/index/tWdkh/wdkhedit/"+data.id);
              break;
      }
    });
  //双击
  table.on('rowDouble(showTable)',function(obj){
      let event = obj.event;
      let data = obj.data;
      //详情
      // if (event === "khname") {
      window.open("/index/tWdkh/wdkhedit/"+data.id);
      // }
  });
  var hujiao = function (data) {
      CoreUtil.sendPost("/tWdkh/outbound", data, function (res) {
          search();
          layer.msg(data.field.phoneWH, {time: 2000}, function () {
          });
      });
  }

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/tWdkh/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/tWdkh/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }
      return false;
    });

  //执行查询
  function search() {
      var split0 =  $('#test-range0').val().replace(/ - /g,' 至 ').split(' 至 ');
      //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
          kujb: $("#kujbSC").val(),
          ssxs: $("#ssxsSC").val(),
          dept: $("#deptSC").val(),
          xclxStartDate: split0[0],
          xclxEndDate: split0[1],
          khly: $("#khlySC").val()
      }
      , page: {
        curr: currPage //重新从第 1 页开始
      }
    });
  };
</script>